<!--
 * @Description:
 * @Author BPF
 * @create 2021/8/20 15:22
 -->
<template>
  <div v-if="initial" class="page bg-primary">
    <div class="page-header">
      <div class="page-header_lt">
        <div class="page-header__logo"></div>
        <div class="page-header__name">无锡全民健康信息平台</div>
      </div>
      <div class="page-header_ct">
        <div class="page-header__item">首页</div>
        <div class="page-header__item page-header__item--active">应用平台</div>
        <div class="page-header__item">政策资料</div>
      </div>
      <div class="page-header_rt">
        <span>Admin &nbsp; 欢迎您!</span>
        <i class="iconfontup up-icon-yonghu"></i>
      </div>
    </div>
    <div class="page-body">
      <div class="page-body__carousel">
        <a-carousel autoplay>
          <div v-for="(item, index) in banner" :key="index">
            <div class="carousel__item" @click.stop="onBannerRoute(item)">
              <global-bus-image
                :file-name="item.img"
                class="icon"
                tag="background"
                width="100%"
                height="100%"
                :size="28"
                style="width: 100%; height: 100%"
              ></global-bus-image>
            </div>
          </div>
        </a-carousel>
      </div>
      <div class="page-body__content">
        <a-tabs v-model:activeKey="tabsActive">
          <a-tab-pane v-for="(item, index) in tabs" :key="index" :tab="item.permissionName">
            <div class="content__two-level">
              <a-row>
                <a-col
                  v-for="(cItem, cIndex) in item.children"
                  :key="cIndex"
                  :xs="8"
                  :sm="6"
                  :md="6"
                  :lg="4"
                  :xl="4"
                  :xxl="4"
                >
                  <div class="content__two-level-item" @click="onRouteTo(cItem)">
                    <global-bus-image
                      :file-name="cItem.extraValue.img"
                      class="icon"
                      width="95px"
                      height="95px"
                      transition
                    ></global-bus-image>
                    <div class="text">{{ cItem.permissionName }}</div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { call, sync, get } from '/src/store/plugins/vuex-helper'
import { listToTree } from '@/utils/tree-algorithm'
import { parseJSONNoError, uniqueKey, download } from '@/utils/common'
import api from '/src/api/index'
import appConfig from '@/config/'
import { message } from 'ant-design-vue'

export default {
  name: 'home',
  components: {},
  setup() {
    const loading_ = sync('app/loading')
    const appPermissions_ = get('user/appPermissions')
    const userInfo_ = get('user/info')
    const { proxy } = getCurrentInstance()
    const state = reactive({
      initial: false,
      banner: [],
      tabsActive: 0,
      tabsPosition: [],
      tabs: [],
      appConfig
    })

    onMounted(async () => {
      state.initial = false
      await initFn()
      state.initial = true
    })

    /**
     * 初始化获取配置
     */
    const initFn = async () => {
      loading_.value = true
      const p2 = new Promise(resolve => {
        const permissionCopy = JSON.parse(JSON.stringify(appPermissions_.value))?.map?.(v => {
          const extraValue = parseJSONNoError(v.extraValue) || {}
          return {
            ...v,
            extraValue: {
              ...extraValue,
              imgSrc: extraValue.img && `${appConfig.static_file_prefix}${extraValue.img}`,
              _key: uniqueKey()
            }
          }
        })
        const result = listToTree({
          list: permissionCopy,
          root: null,
          props: { id: 'permissionCode', parentId: 'parentCode', children: 'children' }
        })
        resolve(result)
      })
      const [res_1, res_2] = await Promise.all([
        api.uipBannerlist({
          params: {
            pageNo: 1,
            pageSize: 25
          }
        }),
        p2
      ])
      loading_.value = false
      if (res_1.code == 200) {
        state.banner =
          res_1.data?.list?.map?.(v => ({
            ...v,
            imgSrc: `${appConfig.static_file_prefix}${v.img}`,
            _key: uniqueKey()
          })) || []
      }
      state.tabs = res_2
    }

    const checkCanOpenIE = url => {
      return new Promise(resolve => {
        try {
          window.location.href = `ie:${val.uri}`
          resolve(true)
        } catch (e) {
          resolve(false)
        }
      })
    }

    /**
     * 点击图标跳转
     * @param val
     */
    const onRouteTo = async val => {
      console.log(val)
      switch (val?.extraValue.browser) {
        case 'ie':
          const result = await checkCanOpenIE(`ie1:${val.uri}`)
          if (!result) {
            message.warn('检测到当前环境不支持打开Ie')
            download('/ie-open-script.reg', 'ie-open-script.reg')
          }
          break
        default:
          window.open(val.uri)
      }
    }

    /**
     * banner 跳转地址
     * @param val
     */
    const onBannerRoute = val => {
      window.open(val.uri)
    }

    return {
      ...toRefs(state),
      onChooseTabs: tabIndex => {
        state.tabsActive = tabIndex
      },
      onRouteTo,
      onBannerRoute
    }
  }
}
</script>

<style scoped lang="less">
@import './index.less';
</style>

<style lang="less" scoped></style>
